Learn how to create an interactive magic wand reveal card layout using HTML, CSS, and JavaScript. Follow our step-by-step guide to design engaging user experiences!
Table of Contents
Welcome to our comprehensive guide on crafting a captivating and interactive magic wand reveal card layout. By harnessing the combined power of HTML, CSS, and JavaScript, you're about to embark on a journey of creating a web element that's not only visually stunning but also engages your users in an enchanting way.
In the digital realm, where user engagement is paramount, the magic wand reveal card layout offers a touch of whimsy and surprise that captures attention and keeps visitors enthralled. Whether you're a seasoned web developer or just starting, this tutorial will walk you through every step, making the process accessible and rewarding.
Are you ready to conjure up an element of delight and interaction on your website? Let's dive into the magic behind the creation of a mesmerizing magic wand reveal card layout!
Credit: Hyperplexed
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our magic wand cards.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down the code step by step:
1. <!DOCTYPE html>: This declaration specifies that the document is an HTML5 document type, which is the latest version of HTML.
2. <html lang="en">: The opening <html> tag signifies the start of an HTML document. The lang attribute is set to "en," indicating that the document's primary language is English.
3. <head>: The <head> section contains meta-information and external resources that are essential for the document's functioning and appearance.
- <title>: This tag sets the title of the web page, which is displayed in the browser's title bar or tab.
- <meta charset="UTF-8" />: This meta tag specifies the character encoding for the document, with "UTF-8" being a widely used character encoding that supports a wide range of characters from various languages.
- <meta name="viewport" content="width=device-width" />: This meta tag defines the viewport settings for responsive design. It indicates that the width of the viewport should match the device's width, ensuring proper rendering on different screen sizes.
- <link rel="stylesheet" href="styles.css" />: This line links an external stylesheet named "styles.css" to the HTML document. The stylesheet contains CSS rules that define the visual appearance of the web page.
4. <body>: The <body> section is where the visible content of the web page is defined.
- <div id="wand">: This <div> element with the ID "wand" seems to represent a "magic wand" element. It will likely be styled using CSS and possibly animated using JavaScript.
- <div class="cap"></div>: Inside the "wand" <div>, there is another <div> with the class "cap." This might represent the top part of the wand or a decorative element.
- <div id="tiles">: This <div> with the ID "tiles" appears to contain a set of "tiles" that could represent visual elements or content blocks on the webpage.
- Inside the "tiles" <div>, there are three <div> elements with the class "tile." Each "tile" contains an image and an <i> element that uses the "fa-solid fa-image" class from the Font Awesome icon library. These elements suggest that the tiles might represent images or image-related content.
- <img src="...">: The <img> tag displays an image on the webpage. The "src" attribute contains the URL of the image to be displayed.
5. <script src="https://kit.fontawesome.com/1ee8f271b9.js"></script>: This line includes a JavaScript script from the Font Awesome icon library. It provides additional functionality for the icon usage.
6. <script src="script.js"></script>: This line includes an external JavaScript file named "script.js." This file contains custom JavaScript code that adds interactivity or dynamic behavior to the webpage.
This is the basic structure of our magic wand cards using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the magic wand cards is in place, the next step is to add styling to the cards using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our reveal effect. We will also add some padding and margin properties to ensure that everything looks correct.
Let's break down the code step by step to understand its functionality:
1. The body rules:
- Sets the background color to a dark blue shade (rgb(2, 6, 23)).
- Makes the body take up the full viewport height (height: 100vh).
- Hides any overflowing content (overflow: hidden).
- Utilizes CSS Grid to center its content both horizontally and vertically (display: grid; place-items: center;).
2. The * (universal selector) rules:
- Resets the margin, padding, and box-sizing for all elements to ensure consistent spacing and sizing (margin: 0; padding: 0; box-sizing: border-box;).
3. The #wand rules:
- Creates a wand-like element with specific styling.
- Defines its width as 10% of the viewport width (width: 10vmin).
- Sets the aspect ratio to 1:10 using aspect-ratio.
- Applies a linear gradient background that gives it a shiny appearance.
- Positions the wand absolutely with a slight tilt (position: absolute; left: 5%; top: 20%; rotate: -3deg;).
- Adjusts its appearance by setting border radius, box shadow, and other properties.
- The .cap nested within #wand represents the top portion of the wand, styled with a similar gradient.
4. The #tiles rules:
- Configures a container for tile elements using a flex display (display: flex).
5. The .tile rules (applied to individual tiles within #tiles):
- Sets up a tile with a square aspect ratio (aspect-ratio: 1) and a dark blue background color.
- Adds rounded corners to create a circular appearance (border-radius: 6vmin).
- Applies box shadows for a subtle 3D effect.
- Positions the tiles absolutely with relative positioning and overflow hidden.
- Differentiates the tiles using nth-child pseudo-classes and applies slight rotations and z-index values.
6. The .tile:is(:nth-child(2), :nth-child(3)) rules:
- Targets the 2nd and 3rd tiles to adjust their positioning and overlap (margin-left: -10vmin).
7. The .tile > i rules:
- Styles an icon within each tile with a large font size and a subtle gray color.
8. The .tile > img rules:
- Defines the appearance of an image within each tile.
- Sets its dimensions to fit the tile (height: 100%; aspect-ratio: 1).
- Positions the image absolutely at the top-left corner of the tile and scales it to cover the tile area (object-fit: cover).
- Adjusts opacity and blur effects using custom properties (variables).
This will give our magic wand cards an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body {
background: rgb(2, 6, 23);
height: 100vh;
overflow: hidden;
display: grid;
place-items: center;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wand {
width: 10vmin;
aspect-ratio: 1 / 10;
background: linear-gradient(
to right,
rgb(26 24 28) 10%,
rgb(42 40 44) 45% 55%,
rgb(26 24 28) 90%
);
position: absolute;
left: 5%;
top: 20%;
translate: -50%;
rotate: -3deg;
z-index: 100;
border-radius: 3vmin;
box-shadow: 0vmin 1vmin 4vmin rgb(0 0 0 / 80%);
overflow: hidden;
}
#wand > .cap {
height: 20%;
width: 100%;
background: linear-gradient(
to right,
rgb(212 221 236) 10%,
rgb(255 255 255) 45% 55%,
rgb(212 221 236) 90%
);
}
#tiles {
display: flex;
}
.tile {
display: grid;
place-items: center;
width: 38vmin;
aspect-ratio: 1;
background-color: rgb(31, 41, 55);
border-radius: 6vmin;
box-shadow: 0vmin 3vmin 6vmin rgb(0 0 0 / 25%),
inset 0vmin 0.5vmin 1vmin rgb(255 255 255 / 15%);
position: relative;
overflow: hidden;
}
.tile:nth-child(1) {
rotate: 3deg;
z-index: 3;
}
.tile:nth-child(2) {
rotate: -2deg;
z-index: 2;
}
.tile:nth-child(3) {
rotate: 5deg;
z-index: 1;
}
.tile:is(:nth-child(2), :nth-child(3)) {
margin-left: -10vmin;
}
.tile > i {
font-size: 15vmin;
color: rgb(255 255 255 / 10%);
}
.tile > img {
height: 100%;
aspect-ratio: 1;
position: absolute;
left: 0px;
top: 0px;
object-fit: cover;
opacity: var(--opacity);
filter: blur(calc(var(--blur) * 10px));
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. This JavaScript code is responsible for creating an interactive effect where a wand follows the mouse movement on a web page. Additionally, as the mouse moves, a set of images (referred to as tiles) are revealed or hidden based on the mouse's position, creating a dynamic visual effect. Let's break down the code step by step:
1. The code starts by selecting a DOM element with the ID "wand" and all elements with the class "tile" using the document.getElementById and document.querySelectorAll methods respectively.
2. A set of utility functions are defined using arrow function syntax:
- xy takes two parameters x and y and returns an object with those properties.
- px takes a numerical value and returns a string with "px" appended to the value.
- deg takes a numerical value and returns a string with "deg" appended to the value.
- clamp takes a value, a minimum, and a maximum, and ensures the value falls within that range.
3. The updateMouse function takes the current mouse coordinates (mouseX and mouseY) and calculates various properties related to the mouse's position and movement within the window. These properties include the mouse's position as an (x, y) pair, its position as a decimal relative to the window size, multipliers to modify the wand's movement, an offset to fine-tune the wand's starting position, and a modified position that considers these adjustments.
4. The revealImages function is responsible for adjusting the transparency (opacity) and blur of the tiles based on the mouse's horizontal position. As the mouse moves horizontally across the screen, the opacity of the tiles changes, revealing or hiding them. The clamp function is used to ensure the calculated values are within the valid range.
5. The getWandStyles function takes the mouse object and returns an object containing CSS styles for positioning and rotation of the wand. The wand's left and top positions are based on the modified mouse position, and the rotation is calculated based on the decimal value of the mouse's x-coordinate.
6. The window.onmousemove event handler is set up to respond to mouse movement. When the mouse moves, it calls the updateMouse function to calculate the properties of the mouse's position, and then calculates the wand's styles using getWandStyles. The animate method is used to smoothly animate the wand's movement, and the revealImages function is called to adjust the tile visibility based on the modified mouse position.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
const wand = document.getElementById("wand"),
tiles = document.querySelectorAll(".tile");
const xy = (x, y) => ({ x, y }),
px = value => `${value}px`,
deg = value => `${value}deg`,
clamp = (value, min, max) => Math.max(Math.min(value, max), min);
const updateMouse = (mouseX, mouseY) => {
const { innerWidth: windowWidth, innerHeight: windowHeight } = window;
const mouse = {
position: xy(mouseX, mouseY),
decimal: xy(mouseX / windowWidth, mouseY / windowHeight),
multiplier: xy(1.3, 0.4),
offset: xy(windowWidth * -0.15, windowHeight * 0.1),
modifiedPosition: xy(0, 0)
}
mouse.modifiedPosition.x = mouse.position.x * mouse.multiplier.x + mouse.offset.x;
mouse.modifiedPosition.y = mouse.position.y * mouse.multiplier.y + mouse.offset.y;
return mouse;
}
const revealImages = mouseX => {
for(const tile of tiles) {
const dimensions = tile.getBoundingClientRect(),
relativeMouseX = mouseX - dimensions.left,
mouseXAsDecimal = clamp(relativeMouseX / dimensions.width, 0, 1);
const opacity = mouseXAsDecimal,
blur = 1 - mouseXAsDecimal;
tile.style.setProperty("--opacity", opacity);
tile.style.setProperty("--blur", blur);
}
}
const getWandStyles = mouse => ({
left: px(mouse.modifiedPosition.x),
top: px(mouse.modifiedPosition.y),
rotate: deg(mouse.decimal.x * 20 - 10)
});
window.onmousemove = e => {
const mouse = updateMouse(e.clientX, e.clientY),
wandStyles = getWandStyles(mouse);
wand.animate(wandStyles, { duration: 400, fill: "forwards" });
revealImages(mouse.modifiedPosition.x);
}Final Output:
Conclusion:
Congratulations, you've successfully conjured a captivating magic wand reveal card layout using the enchanting trio of HTML, CSS, and JavaScript! Through this journey, you've learned to infuse interactivity and delight into your website, captivating visitors with an element of surprise.
By following our step-by-step guide, you've unlocked the power to design an interactive card layout that engages users and leaves a lasting impression. The fusion of structural finesse, artistic styling, and seamless interactivity has given rise to a digital masterpiece that transcends the ordinary.
As you reflect on your achievement, remember that web development is a magical realm where creativity knows no bounds. Each line of code holds the potential to craft experiences that inspire and captivate. So whether you're revealing hidden content or animating elements with finesse, your newfound skills empower you to shape the digital world in wondrous ways.
With your magic wand reveal card layout now at your command, go forth and create digital enchantment. The possibilities are as limitless as your imagination. Thank you for joining us on this enchanting journey of creativity and learning. Here's to weaving more spells of innovation in your web development endeavors!
Keep conjuring, keep creating, and keep the magic alive in every line of code you write.
Farewell, and may your web creations continue to mesmerize and delight!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
